<template>
  <!-- book 页 下的 底部数据 -->
  <div class="Service_Book_Suitable">
    <div
      class="Suitable_item"
      v-for="(item, index) in serviceData.sections"
      :key="index"
    >
      <div class="Suitable_item_title">
        <h5>{{ item.title }}</h5>
      </div>
      <div class="Suitable_item_text">
        <strong
          :class="{ not_strong: !item.subsections }"
          class="item_text_strong"
          >{{ item.content }}</strong
        >
        <div
          class="Suitable_item_text_item"
          v-for="(el, i) in item.subsections"
          :key="i"
        >
          <p>{{ el.name }}</p>
          <span v-if="el.count">x{{ el.count }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 底部数据
import { ref } from "vue";
const serviceData = ref({
  sections: [
    {
      title: "Suitable for pets",
      content: "Dogs and Cats", // 二级标题作为内容
      sections_class: true,
    },
    {
      title: "Vaccination",
      content: "Include item", // 二级标题作为内容
      subsections: [
        {
          name: "3 needles intotal",
        },
        {
          name: "For pet age: Only for healthy dogs and cats",
        },
        {
          name: "vaccinated 8 weeks of age or older Vaccine action:",
        },
        {
          name: "protects against rhinotrachets, alicivirus disease",
        },
        {
          name: "and panleukopenia.",
        },
        {
          name: "Vaccination recommendation: Healthy dogs and",
        },
        {
          name: "cats 8 weeks of age or older are given three vaccine",
        },
        {
          name: "at first, spaced 21-28 days apart. One booster shot",
        },
        {
          name: " each year after that.",
        },
      ],
    },
    {
      title: "Basic physical examination",
      content: "Service item", // 二级标题作为内容

      subsections: [
        { name: "Basic Physical Examination", count: 1 },
        { name: "Included Items", count: 1 },
        { name: "Eye test", count: 1 },
        { name: "Muscle and bone examination", count: 1 },
        { name: "Lung auscultation", count: 1 },
        { name: "Superficial lymph nodes and thyroid palpation", count: 1 },
        { name: "Cardiac auscultation", count: 1 },
        { name: "Exterior examination of urinary system", count: 1 },
        { name: "Skin appearance check", count: 1 },
        { name: "Weight measurement", count: 1 },
        { name: "BCS nutritional status assessment", count: 1 },
        { name: "Abdominal auscultation", count: 1 },
      ],
    },
  ],
});
</script>

<style lang="less" scoped>
.Service_Book_Suitable {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 200px;
  .Suitable_item {
    width: 92%;
    border-radius: 10px;
    background-color: #fff;
    margin-top: 15px;
    overflow: hidden;
    .Suitable_item_title {
      font-size: 20px;
      font-weight: bold;
      padding: 10px 8px;
      box-sizing: border-box;
      background-color: #fff1e8;
    }
    .Suitable_item_text {
      padding: 10px 8px;
      box-sizing: border-box;

      .item_text_strong {
        display: block;
        font-size: 14px;
        margin-bottom: 6px;
        &.not_strong {
          font-size: 12px;
          font-weight: normal;
          margin: 0;
        }
      }
      p {
        font-size: 13px;
        color: #7a7e81;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 16px;
      }
      span {
        font-size: 12px;
        color: #ccc;
      }
      .Suitable_item_text_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>